<template>
  <Row class="nav nav-top">
    <Col span="24">
      <Menu mode="horizontal">
        <div class="wrapper">
          <div class="btn-bar">
            <router-link to="/">
              <MenuItem name="home">
                <Icon type="ios-home" :size="iconSize"/>
                首页
              </MenuItem>
            </router-link>
            <router-link to="/">
              <MenuItem name="study">
                <Icon type="ios-book" :size="iconSize"/>
                在线课程
              </MenuItem>
            </router-link>
            <router-link to="/">
              <MenuItem name="special">
                <Icon type="social-snapchat" :size="iconSize"/>
                专题
              </MenuItem>
            </router-link>
            <router-link to="/usercenter">
              <MenuItem name="history">
                <Icon type="funnel" :size="iconSize"/>
                历史
              </MenuItem>
            </router-link>
            <router-link to="/login">
              <a href="">登陆</a>
            </router-link>
            <span>/</span>
            <router-link to="/register">
              <a href="">注册</a>
            </router-link>
          </div>
        </div>
      </Menu>
    </Col>
  </Row>
</template>

<script>
export default {
  name: 'Nav',
  data () {
    return {
      iconSize: 18
    }
  }
}
</script>

<style scoped>
.btn-bar {
  float: right;
}

.wrapper {
  width: 100%;
  padding: 0 3rem;
  overflow: hidden;
}

.nav {
  transition: all .3s linear;
}

.nav:hover {
  box-shadow: 0 0 10px #bbbbbb;
}

.nav-top {
  left: 0;
  right: 0;
  top: 0;
  z-index: 1000;
  position: fixed;
}

</style>
